<script setup lang="ts">
import {useEquipmentTransferStore} from "@/stores/equipmentTransferStore.ts";
import {onMounted,ref} from "vue";
import router from "@/router";
import dayjs from 'dayjs'

const equipmentTransferStore=useEquipmentTransferStore();

// 分页显示数据
const current=ref(1);
const pageSize=ref(10);


onMounted( async ()=>{
  await equipmentTransferStore.getEquipmentTransferList(current.value,pageSize.value);
  await equipmentTransferStore.getEquipmentTransferCounts();
})


// 根据不同的条件，会出现不同的分页搜索结果，但要设立标志来用于那种搜索。这个组件默认fullTransferFormListFlag=true,其它是false
// 再根据采取的不同搜索条件来更改各个flag的布尔值
// 这些flag值根据搜索条件会慢慢增加
// 搜索所有的transfer的表单标志
const fullTransferFormListFlag=ref(true);
// 根据表单创建时间的表单标志
const getByCreateTimeFlag=ref(false);
//  多种类类型名称查询表单标志
const getListByAllTypeNameFlag=ref(false);


// 分页组件的每页条数值改变
const handleSizeChange=async (val:any)=>{
  pageSize.value=val;
  if (fullTransferFormListFlag.value===true){
    await equipmentTransferStore.getEquipmentTransferList(current.value,pageSize.value);
    await equipmentTransferStore.getEquipmentTransferCounts();
  }

  else if(getByCreateTimeFlag.value===true){
    // 函数第一，第二个参数应该是start,end
    await  equipmentTransferStore.getByBetweenTime(startDate.value,endDate.value,current.value,pageSize.value);
    await equipmentTransferStore.getByBetweenTimeCounts(startDate.value,endDate.value);

  }
  else if (getListByAllTypeNameFlag.value===true){
    await equipmentTransferStore.getByAllTypeName(allTypeName.value,current.value,pageSize.value);
    await equipmentTransferStore.getByAllTypeNameCounts(allTypeName.value);
  }

}
// 分页组件的第几页数值改变
const handleCurrentChange=async (val:any)=>{
  current.value=val;
  if (fullTransferFormListFlag.value==true){
    await equipmentTransferStore.getEquipmentTransferList(current.value,pageSize.value);
    await equipmentTransferStore.getEquipmentTransferCounts();
  }

  else if (getByCreateTimeFlag.value===true){
    await  equipmentTransferStore.getByBetweenTime(startDate.value,endDate.value,current.value,pageSize.value);
    await equipmentTransferStore.getByBetweenTimeCounts(startDate.value,endDate.value);
  }
  else if (getListByAllTypeNameFlag.value===true){
    await  equipmentTransferStore.getByAllTypeName(allTypeName.value,current.value,pageSize.value);
    await equipmentTransferStore.getByAllTypeNameCounts(allTypeName.value);
  }

}

// 进入表格中一条数据的详细页面
// const oneEquipmentTransferShow=(id:number)=>{
//   router.push({path:`/home/equipment/equipmentTransferDetail/${id}`});
// }

// 通过时间选择器选择时间
const dateTime=ref([]);
const dateOne=ref(Date);
const dateTwo=ref(Date);

// 多类型名称查询模块
const allTypeName=ref('');

const getListByAllTypeName=async ()=>{
  // 搜索所有的transfer的表单标志
  fullTransferFormListFlag.value=false;
// 根据表单创建时间的表单标志
  getByCreateTimeFlag.value=false;
  // 多类型表单名称查询标志
  getListByAllTypeNameFlag.value=true;
  await equipmentTransferStore.getByAllTypeName(allTypeName.value,current.value,pageSize.value);
  await equipmentTransferStore.getByAllTypeNameCounts(allTypeName.value);
}

const reloadFullList=async ()=>{
  // 搜索所有的transfer的表单标志
  fullTransferFormListFlag.value=true;
// 根据表单创建时间的表单标志
  getByCreateTimeFlag.value=false;
  // 多类型表单名称查询标志
  getListByAllTypeNameFlag.value=false;
  await equipmentTransferStore.getEquipmentTransferList(current.value,pageSize.value);
  await equipmentTransferStore.getEquipmentTransferCounts();

}


const dateValue = ref('')
const options = [
  {
    value: 'todayDate',
    label: '今天',
  },
  {
    value: 'thisWeekDate',
    label: '7天内',
  },
  {
    value: 'thisMonthDate',
    label: '30日内',
  },
  {
    value: 'thisSeasonDate',
    label: '90日内',
  },
  {
    value: 'thisYearDate',
    label: '365日内',
  },
  {
    value: 'customDate',
    label: '自定义',
  },
]



const disable=ref(false);
// 时间选择器中，开始、结束时间
const startDate=ref(new Date());
const endDate=ref(new Date());

const getEquipmentTransferFormListByChooseTime=async ()=>{
  // 搜索所有的transfer的表单标志
  fullTransferFormListFlag.value=false;
// 根据表单创建时间的表单标志
  getByCreateTimeFlag.value=true;
//  多中类型名称查询表单标志
  getListByAllTypeNameFlag.value=false;

  if (dateValue.value==='todayDate'){
    startDate.value=new Date(dayjs().add(0, 'd').startOf('day').format('YYYY-MM-DD'));
    endDate.value=new Date(dayjs().format('YYYY-MM-DD'));
    await  equipmentTransferStore.getByBetweenTime(startDate.value,endDate.value,current.value,pageSize.value);
    await equipmentTransferStore.getByBetweenTimeCounts(startDate.value,endDate.value);
  }
  if (dateValue.value==='thisWeekDate'){
    startDate.value=new Date(dayjs().add(-7, 'd').startOf('day').format('YYYY-MM-DD'));
    endDate.value=new Date(dayjs().format('YYYY-MM-DD'));
    await  equipmentTransferStore.getByBetweenTime(startDate.value,endDate.value,current.value,pageSize.value);
    await equipmentTransferStore.getByBetweenTimeCounts(startDate.value,endDate.value);
  }
  if (dateValue.value==='thisMonthDate'){
    startDate.value=new Date(dayjs().add(-30, 'd').startOf('day').format('YYYY-MM-DD'));
    endDate.value=new Date(dayjs().format('YYYY-MM-DD'));
    await  equipmentTransferStore.getByBetweenTime(startDate.value,endDate.value,current.value,pageSize.value);
    await equipmentTransferStore.getByBetweenTimeCounts(startDate.value,endDate.value);
  }
  if (dateValue.value==='thisSeasonDate'){
    let start=dayjs().add(-90, 'd').startOf('day').format('YYYY-MM-DD');
    let end= dayjs().format('YYYY-MM-DD');
    await  equipmentTransferStore.getByBetweenTime(new Date(start),new Date(end),current.value,pageSize.value);
    await equipmentTransferStore.getByBetweenTimeCounts(new Date(start),new Date(end));
  }
  if (dateValue.value==='thisYearDate'){
    startDate.value=new Date(dayjs().add(-365, 'd').startOf('day').format('YYYY-MM-DD'));
    endDate.value=new Date(dayjs().format('YYYY-MM-DD'));
    await  equipmentTransferStore.getByBetweenTime(startDate.value,endDate.value,current.value,pageSize.value);
    await equipmentTransferStore.getByBetweenTimeCounts(startDate.value,endDate.value);
  }
  if (dateValue.value=='customDate'){
    disable.value=true;
  }
}


const getTransferListByTime=async ()=>{
  // 搜索所有的transfer的表单标志
  fullTransferFormListFlag.value=false;
// 根据表单创建时间的表单标志
  getByCreateTimeFlag.value=true;
//  多中类型名称查询表单标志
  getListByAllTypeNameFlag.value=false;

  dateOne.value=dateTime.value[0];
  dateTwo.value=dateTime.value[1];
  // console.log(dateTime.value);
  // await equipmentTransferStore.getByBetweenTime(dateOne.value,dateTwo.value,current.value,pageSize.value);
  // await equipmentTransferStore.getEquipmentTransferCounts(dateOne,dateTwo);
  startDate.value=dateTime.value[0];
  endDate.value=dateTime.value[1];
  // 最后一天，他的时间是最后一天日期的0：00,所以必须要加上一天24*1000*3600
  endDate.value.setTime(endDate.value.getTime()+3600*1000*24);
  await  equipmentTransferStore.getByBetweenTime(startDate.value,endDate.value,current.value,pageSize.value);
  await equipmentTransferStore.getByBetweenTimeCounts(startDate.value,endDate.value);
}

</script>

<template>
  <!-- 面包屑 -->
  <div class="bread-container">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: `/` }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:`/home/equipment`}" >设备主页</el-breadcrumb-item>
      <el-breadcrumb-item  >设备出场列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!--这里放置各种查询组件  -->
  <div class="demo-date-picker">
    <span  class="block">
      <!--  多种类型名称查询-->
      <el-input v-model="allTypeName" size="small"  clearable style="width: 320px;margin-left: 20px" placeholder="设备名称/设备类型/创建人/最后修改人/转场目的地/编码" @clear="reloadFullList" />&nbsp;
        <el-button type="primary" size="small" @click="getListByAllTypeName">查询</el-button>

      <el-select
          v-model="dateValue"
          clearable
          placeholder="Select"
          style="width: 240px;margin-left: 10px"
          size="small"
          @change="getEquipmentTransferFormListByChooseTime"
          @clear="reloadFullList"
      >
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    />
  </el-select>
    </span>
    <el-dialog title="请选择时间" width="450" v-model="disable"  >
      <el-date-picker
          v-model="dateTime"
          type="daterange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          :size="'small'"
          @change="getTransferListByTime"
      />
    </el-dialog>
  </div>


  <!--这里放置各种查询组件  -->


  <!--  分页显示设备数据-->
  <div class="table_contain">
    <div  class="block" style="float: right">
      <el-pagination v-model:currentPage="current"
                     :page-sizes="[10,15,30]"
                     :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="equipmentTransferStore.equipmentTransferCount"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     small
                     background
      >
      </el-pagination>
    </div>

    <!-- 对表格中的字段排序，在表格属性中添加:default-sort,后面参数是需要排序的字段，
         order:后面是排序要求,这里是descending,然后在需要排序的列元素中添加sortable属性-->
    <div >
      <el-table
          :data="equipmentTransferStore.equipmentTransferList"
          style="width: 100%"
          stripe
          border
          max-height="800"
          :default-sort="{prop:'updateTime',order:'descending',}"
      >
        <el-table-column prop="eqName" fixed label="设备名称" width="220" />

        <el-table-column prop="brand" label="品牌" width="100" />

        <el-table-column prop="model" label="型号" width="160" />

        <el-table-column prop="pieces" label="单位" width="60" />

        <el-table-column prop="number" label="数量" width="60"/>

        <el-table-column prop="typeName" label="设备类型" width="150"/>

        <el-table-column prop="encode"  label="表单编号" width="280"    sortable />

        <el-table-column prop="sendingProject" label="原设备所在地" width="200"/>

        <el-table-column prop="receivingProject" label="设备转场目的地" width="200"/>

        <el-table-column prop="description" label="备注" width="230"/>

        <el-table-column  label="操作" width="220" fixed="right">
          <!--  在操作这一栏，添加一个template元素，加一个#default属性，通过这个属性，获取到这一行的数据，是个对象
                       scope：就是el-table表格中被选中的那一行的数据，通过scope获取到该行的数据-->
          <template #default="scope">
<!--            <el-button size="small" type="warning" plain  @click="oneEquipmentTransferShow(scope.row.id)">详情</el-button>-->
            <el-button size="small" type="warning" plain  @click="router.push({path:`/home/equipment/equipmentTransferDetail/${scope.row.id}`})">详情</el-button>
            <!--                    移除项移到每行数据详细显示页面-->
            <!--                    <el-button size="small" type="danger"  plain :icon="Delete" @click="mainInfooOneRemove(scope.row)">移除</el-button>-->
            <!--            <el-button size="small" type="danger"  plain  @click="editOneEquipment(scope.row)">编辑</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block" style="float: right">
      <el-pagination v-model:currentPage="current"
                     :page-sizes="[10,15,30]"
                     :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="equipmentTransferStore.equipmentTransferCount"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     small
                     background
      >
      </el-pagination>
    </div>
  </div>

</template>

<style scoped lang="scss">

.bread-container {
  padding: 25px 10px;
  margin-left: 10px;
}

</style>